<template>
  <div :style="type == 1?'background:#DD3A38;':''">
    <div class="banner_list" v-if="type == 1">
      <img class="banner" src="@/assets/zy1.jpg" alt>
      <img class="banner" src="@/assets/zy2.jpg" alt>
      <img class="banner" src="@/assets/zy3.jpg" alt>
      <img class="banner" src="@/assets/zy4.jpg" alt>
    </div>
    <div class="banner_list" v-else-if="type ==3">
      <img class="banner" src="@/assets/xh1.jpg" alt>
      <img class="banner" src="@/assets/xh2.jpg" alt>
      <img class="banner" src="@/assets/xh3.jpg" alt>
    </div>
    <div class="shop_list" v-if="shopTitle&&list.length>0">{{shopTitle}}</div>
    <div class="shop_list">
      <div class="shop_item" v-for="(item,index) in list" :key="index">
        <div class="shop_box">
          <span @click="goInfo(item)">
            <img :src="'http://www.baseco.top/ljm/public/uploads/shop/'+item.shop_img" alt>
            <span class="shop_price">¥{{item.shop_price}}</span>
            <span class="shop_desc">{{item.shop_title}}{{item.shop_desc}}</span>
          </span>
          <span class="shop_join" @click="addShopCar(item)">加入购物车</span>
        </div>
      </div>
    </div>
    <div class="shop_null"  v-show="list.length==0">暂无数据</div>
    <div class="pageList" v-if="list.length>0">
      <page :page-index="page" :total="count" :page-size="pageSize" @change="pageChange"></page>
    </div>
  </div>
</template>

<script>
import { POST,ljmAjax } from "@/api/index";
import Page from "@/components/page";
export default {
  data() {
    return {
      list: {},
      page: 1,
      count: 0,
      pageSize: 8,
      type: this.$route.query.type||"",
      loginData: this.$store.state.loginData || "",
      shopType: this.$route.query.shopType || "",
      shopTitle: this.$route.query.shopTitle ||""
    };
  },
  created() {
    console.log(this.type);
    this.init();
  },
  methods: {
    init() {
      const data = {
        page: this.page,
        pageSize: this.pageSize,
        type:this.type,
        shopType:this.shopType
      };
      ljmAjax("api/index/getShopList", data).then(res => {
        this.list = res.data.data;
        this.count = res.data.total;
      });
    },
    addShopCar(item) {
      console.log(item)
      const shop_buyer = this.loginData.id || 0;
      if (shop_buyer == 0) {
        this.$message.error("请先登录在点击购买");
        this.$router.push("/login");
        return;
      }
      const data = {
        shop_id: item.shop_id,
        shop_title: item.shop_title,
        shop_price: item.shop_price,
        shop_time: new Date().getTime(),
        shop_img: item.shop_img,
        shop_buyer: shop_buyer
      };
      POST("api/index/addCar", data).then(res => {
        console.log(res.data.msg);
         this.$message({
          message:res.data.msg,
          type: 'success'
        });
      });
    },
    goInfo(item) {
      console.log(item);
      this.$router.push("/info?id=" + item.aid);
    },
    pageChange(page) {
      this.page = page;
      this.init();
      console.log(page);
    }
  },
  components: {
    Page
  }
};
</script>
<style scoped>
.banner_list {
  margin: 0 auto;
  width: 1200px;
}
.banner {
  width: 1200px;
  overflow: hidden;
  vertical-align: top;
  background: #eee;
}
.shop_list {
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
  margin: 30px auto;
}
.shop_null{
  text-align: center;
  height: 300px;
  line-height: 300px;
}
.shop_list .shop_item {
  background: #fff;
  width: 278px;
  height: 310px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px solid #f5f5f5;
  cursor: pointer;
  transition: all 0.2s;
}
.shop_list .shop_item:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transform: translate3d(0, -2px, 0);
  border: 1px solid red;
}
.shop_item img {
  width: 265px;
  height: 186px;
  margin-top: 6px;
  margin-left: 6px;
}
.shop_item .shop_price {
  color: #e62318;
  font-weight: 500;
  height: 26px;
  display: block;
  padding-left: 10px;
  margin-top: 8px;
  overflow: hidden;
  white-space: nowrap;
}
.shop_item .shop_desc {
  height: 38px;
  line-height: 20px;
  color: #333;
  display: block;
  overflow: hidden;
  padding: 0 10px;
  margin-top: 4px;
}
.shop_item .shop_join {
  margin-top: 5px;
  margin-right: 10px;
  width: 100px;
  height: 25px;
  line-height: 25px;
  color: red;
  display: block;
  border: 1px solid #dedede;
  font-size: 14px;
  text-align: center;
  float: right;
  cursor: pointer;
}
.shop_item .shop_join:hover {
  border: 1px solid red;
}
.pageList {
  text-align: center;
}
</style>


